<template>
	<view class="app">
		<view class="imgDiv">
			<image src="../../static/icon/logo.png" mode="aspectFill"></image>
			<view class="sitename">云上石榴</view>
		</view>
		
		<button v-if="phoneNumber ==''" class="btn" id="maskButtom" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
		
			<view class="item column center">
				授权获取手机号
			</view>
		</button>
		<button v-else type="warn" class="btn" @click="authorize()">授权获取用户头像</button>
		<view class="yinsi">
				<!-- <uni-data-checkbox v-model="radio1" :localdata="sex"></uni-data-checkbox> -->

				<checkbox name="" :value="1" /><text>请仔细阅读<text>《用户协议》</text>与<text>《隐私协议》</text>，勾选后默认同意以上条款</text>
		</view>
	</view>
</template>

<script>
	import WXBizDataCrypt from '@/lib/WXBizDataCrypt.js';
	let App = getApp();
	export default {
		data() {
			return {
				userinfo:false,
				phoneNumber:'',
			}
		},
		async onLoad() {
			const phoneNumber =  uni.getStorageSync('phoneNumber')
		
			 uni.showLoading({ title:" ️ 链接微信..."})
			 const loginRes = await uni.login({ provider: 'weixin' });
			 const apiRes = await uni.request({
			  url: this.HttpServe+'/Api/getOpenId',
			  data: { code: loginRes[1].code },
			  method: 'get',
			 });
			 // console.log(apiRes)
			 uni.setStorageSync('login',apiRes[1].data);
			 App.globalData.login = apiRes[1].data;
			 // console.log('登录完成', apiRes[1].data);
			 uni.hideLoading()
		},
		methods: {
			async authorize() {
				let that = this
				//获取用户信息
				uni.getUserProfile({
					desc:"登录",
					success(res) {
						that.userData = res.userInfo
						try{
							that.updataUserinfo()
						}catch(e){}
					}
				})
			
			},
			async updataUserinfo(){
				let that = this
				uni.showLoading({
					title:"登录中..."
				})
				//新增用户
				const userinfo1 = await that.GQL({
					"operationName": "createSlUser",
					"query": "mutation createSlUser($input: CreateSlUserInput!) { createSlUser(input: $input) { slUser { avatarUrl nickname openid phone level language gender uid } } }",
					"variables": {
						"input": {
							"slUser": {
								"nickname": that.userData.nickName,
								"avatarUrl": that.userData.avatarUrl,
								"openid": uni.getStorageSync('login').openid,
								"phone": uni.getStorageSync("phoneNumber")
							}
						}
					}
				})
				// console.log('11---------',userinfo1.data.createSlUser.slUser)
				if(userinfo1.data.createSlUser.slUser){
					uni.setStorageSync('userData', userinfo1.data.createSlUser.slUser);
					uni.setStorageSync('userinfo', true);
					// console.log('2222-----',uni.getStorageSync("userData"))
					uni.reLaunch({
						url:"/pages/user/index"
					})
					
				}else{
					uni.showToast({ title: '授权失败', icon: 'error', duration: 3000 });
				}
				uni.hideLoading();
				this.ifAuthorize = false
			},
			async decryptPhoneNumber(e) {
			  if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
			   uni.showToast({ title: ' ️ 需要授权手机登录', icon: 'error', duration: 3000 });
			  } else {
			   let DataCrypt = new WXBizDataCrypt('wxfb633c75dc609440', App.globalData.login.session_key);
			   let data = DataCrypt.decryptData(e.detail.encryptedData, e.detail.iv)
			   this.phoneNumber = Number(data.phoneNumber);
			   uni.setStorageSync('phoneNumber', data.phoneNumber);
			   uni.showLoading({title:"手机号码验证中"})
			   uni.request({
					url: this.HttpServe+"/Api/userinfo",
					data:{"openid":App.globalData.login.openid},
					method:"post",
					success(res) {
						 // console.log('1---',res);
						if(res.data.code == 200){
							let data = res.data.data
							// console.log('1---',data);
							uni.setStorageSync('userData', data);
							uni.setStorageSync('authphone', true);
							uni.reLaunch({
								url:"/pages/index/index"
							})
						}else{
							uni.hideLoading()
							
						}
					}
			   })
			  }
			 },
			
		}
	}
</script>


<style scoped lang='scss'>
	.app {
		text-align: center;
	}
	.sitename{
		text-align: center;
		font-size: 20px;
	}
	.btn{
		background-color: #C7171E;
		color: #fff;
		width: 80%;
	}

	.imgDiv {
		width: 200rpx;
		height: 200rpx;
		margin: 100px auto;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	.mt20{
		margin-top: 30px;
	}

	
</style>
